<template>
  <f-choose-time
    :startOptions="startOptions"
    @startChange="startChange"
    @endChange="endChange"
  ></f-choose-time>
  <br />
  <br />
  <br />
  <f-choose-date
    :disableToday="false"
    :startOptions="startOptions"
    @startChange="dateStartChange"
    @endChange="dateEndChange"
  ></f-choose-date>
</template>

<script lang="ts" setup>
  import {} from 'vue'
  interface endValue {
    startTime: string
    endTime: string
  }

  interface dateEndValue {
    startDate: Date
    endDate: Date
  }
  let startChange = (val: string) => {
    console.log(val)
  }

  let endChange = (val: endValue) => {
    console.log(val)
  }
  let dateStartChange = (val: Date) => {
    console.log(val)
  }

  let dateEndChange = (val: dateEndValue) => {
    console.log(val)
  }
  let startOptions = {
    size: 'default',
    clearable: true
  }
</script>
<style lang="scss" scoped></style>
